const commonUtil = require('../../util/common');

module.exports = (componentName = '') => {
  // 驼峰组件名
  const H_T_C_N = commonUtil.upperFirst(componentName);
  return `

<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button v-auth="PermissionCode.Add${H_T_C_N}" type="primary" @click="handleAdd">
          添加$1
        </a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction :actions="activeOptions(record)" />
        </template>
      </template>
    </BasicTable>
    <${H_T_C_N}Drawer @register="registerDrawer" @success="handleSuccess" />
  </div>
</template>
<script setup lang="ts" name="${H_T_C_N}Management">
import ${H_T_C_N}Drawer from './${H_T_C_N}Drawer.vue';
import { BasicTable, useTable, TableAction, ActionItem } from '/@/components/Table';

import { message } from 'ant-design-vue';
import { columns, searchFormSchema } from './${componentName}.data';
import { get${H_T_C_N}List, del${H_T_C_N} } from '/@/api/${componentName}';
import { useDrawer } from '/@/components/Drawer';
import { PermissionCode } from '/@/enums/roleEnum';
import { usePermission } from '/@/hooks/web/usePermission';

//#region //* ************** hooks
const { hasPermission } = usePermission();
//#endregion

//#region //? ************** $1表格
const [registerTable, { reload }] = useTable({
  title: '$1',
  api: get${H_T_C_N}List,
  columns,
  formConfig: {
    labelWidth: 120,
    schemas: searchFormSchema,
    baseColProps: {
      span: 8,
    },
  },
  isTreeTable: true,
  striped: false,
  useSearchForm: true,
  showTableSetting: true,
  bordered: true,
  showIndexColumn: false,
  canResize: false,
  actionColumn: {
    width: 150,
    title: '操作',
    dataIndex: 'action',
    fixed: undefined,
  },
});
function activeOptions(record): ActionItem[] {
  return [
    {
      icon: 'ant-design:delete-outlined',
      color: 'error',
      popConfirm: {
        title: '确认删除此$1？',
        confirm: handleDel.bind(null, record.id),
      },
      ifShow: hasPermission(PermissionCode.Del${H_T_C_N}),
    },
    {
      icon: 'clarity:note-edit-line',
      tooltip: '编辑$1资料',
      onClick: handleEdit.bind(null, record),
      ifShow: hasPermission(PermissionCode.Edit${H_T_C_N}),
    },
  ];
}
//#endregion

//#region //* ************** 编辑弹框
const [registerDrawer, { openDrawer }] = useDrawer();

function handleAdd() {
  openDrawer(true, {
    isUpdate: false,
    record: {},
  });
}

function handleEdit(record: Recordable) {
  openDrawer(true, {
    record,
    isUpdate: true,
  });
}


function handleDel(id) {
  del${H_T_C_N}({ id }).then((_) => {
    message.success('操作成功');
    handleSuccess();
  });
}

function handleSuccess() {
  reload();
}
// #endregion

</script>
`;
};
